<template>
	<view :style="viewColor">
		<!-- <view class="headTab" v-if="grade == 0 && list_count > 0" style="text-align: center;font-size: 36rpx;padding-top: 20rpx;">
			我邀请团队数量{{list_count}}人
		</view> -->
		<view class="navTabBox" v-if="grade == 3">
			<view class="longTab">
				<view class="tab-item" v-for="(item,index) in tabList" :key="index" :class="{'on':item.type == tabIndex}" @click="bindTab(item.type)"><text>{{item.title}}</text></view>
			</view>
		</view>
		<view class="promoter-list">
			<view class='list' v-if="recordList.length && tabIndex != 2">
				<block v-for="(item,index) in recordList" :key="index">
					<view class='item acea-row row-between-wrapper'>
						<view class="picTxt acea-row row-between-wrapper">
							<view class='pictrue' @click="viewUser(item.uid)">
								<image :src='item.avatar ? item.avatar : "/static/images/f.png"'></image>
								<image class="svip" src="https://img.jukee.net/def/6c5a5202401291828344182.png" v-if="item.is_svip > 0" />
							</view>
							<view class='text' @click="viewUser(item.uid)">
								<view class='name line1'>{{item.nickname}}</view>
								<view class="label">{{item.label_name.label_name}}</view>
							</view>
							<view class="contact_btn" @click="couponTap2(item)">
								联系他
							</view>
						</view>
					</view>
				</block>
			</view>
			<view class='list' v-else-if="recordList.length && tabIndex == 2">
				<block v-for="(item,index) in recordList" :key="index">
					<view class='item acea-row row-between-wrapper'>
						<view class="picTxt acea-row row-between-wrapper">
							<view class='pictrue'>
								<image :src='item.focus.avatar ? item.focus.avatar : "/static/images/f.png"'></image>
								<image class="svip" src="https://img.jukee.net/def/6c5a5202401291828344182.png" v-if="item.is_svip > 0" />
							</view>
							<view class='text'>
								<view class='name line1'>{{item.user_notes || item.focus.nickname}}
								</view>
								<view @click='openNotes(index)'><text class='iconfont icon-bianji'></text>修改备注</view>
								<view class="label">{{item.focus.label_name.label_name}}</view>
							</view>
							<view class="contact-button" style=" margin-left: auto;">
								<!-- display: grid; grid-gap: 10rpx; -->
								<view class="user_contact_wx"  @click="getUserContactInformations(item, 'we_chat_account')">
									<image src="https://ly.jukee.net/uploads/def/20230703/8a86ee47e8ca30aa63ce6ad95c1bc151.png" />
								</view>
								<view class="user_contact_tel" @click="getUserContactInformations(item, 'phone')">
									<image src="https://ly.jukee.net/uploads/def/20230703/54b09da7a3583769bae9b03a9d626fa7.png" />
								</view>
								<!-- <view class="contact_btn" @click="couponTap2(item.focus)">
									联系他
								</view>
								<view class="contact_btn" @click="setTop(item.relevance_id, item.is_topping)" v-if="item.is_topping != 1">
									置顶
								</view>
								<view class="contact_btn" @click="setTop(item.relevance_id, item.is_topping)" style="color: #FFE103;background: #ccc;" v-else>
									取消置顶
								</view> -->
							</view>
						</view>
					</view>
				</block>
			</view>
			<emptyPage v-else title="暂无数据"></emptyPage>
		</view>
		<authorize @onLoadFun="onLoadFun" :isAuto="isAuto" :isShowAuth="isShowAuth" @authColse="authColse"></authorize>
		<view class="notes_ceng" v-if="is_notes">
			<view class="notes_content">
				<view class="notes_title">修改备注</view>
				<view class="notes_input"><input type="text" placeholder="请输入备注" v-model="user_notes"></view>
				<view class="notes_btn">
					<view class="notes_btuuon" @click="subNotes">确定</view>
					<view class="notes_btuuon" @click="is_notes = false">取消</view>
				</view>
			</view>
		</view>
		<!-- 手机号微信查看弹窗 -->
		<view class="popup_user_contact" v-show="is_popup_user_contact" @click="is_popup_user_contact=false">
			<view class="popup_user_contact_c">
				<view class="popup_user_contact_h">
					<view class="popup_user_contact_t">提示</view>
					<view class="popup_user_contact_u">{{popup_user_contact_type == 'phone' ? '电话：' : '微信号：'}}<text>{{popup_user_contact}}</text></view>
				</view>
				<view class="popup_user_contact_b">
					<view class="popup_user_contact_close" @click="is_popup_user_contact=false">取消</view>
					<view class="popup_user_contact_copy" @click="copyUserContact">复制</view>
				</view>
			</view>
		</view>
		<!-- 二维码弹窗end -->
		<!-- 购买查看会员次数弹窗 -->
		<paymentData :payMode="payMode" :pay_close="pay_close" :is-call="true" @onChangeFun="onChangeFun" :payTitle="'查看会员联系方式次数'" :payGroupName="'user_contact_information'" :userCount="0" :unit="'个'" :rechargeType="1"></paymentData>
		<!-- 升级VIP弹窗 -->
		<view class="user_vip_tips" v-if="user_vip_tips">
			<view class="user_vip_back"></view>
			<view class="user_vip_content">
				<view class="user_vip_close" @click="user_vip_tips = false">
					<image src="https://ly.jukee.net/uploads/default/20230803/8d5635ef7c1504bfadbd85f0a04270cc.png" />
				</view>
				<view class="user_vip_icon">
					<image src="https://img.jukee.net/def/3902e202311271626269626.png" />
				</view>
				<view class="user_vip_title font-size32-bold">成为VIP会员</view>
				<view class="user_vip_tit font-size36-bold" style="font-size: 46rpx;">无限添加客户微信<br/>查看所有客户联系方式</view>
				<view class="user_vip_messag">更多权益请在 “我的” 会员中心查看</view>
				<view class="user_vip_btn" @click="goUrl('/pages/annex/vip_paid/index')">确定</view>
			</view>
		</view>
		<view class="back_popup flex-aj-center" @click="wechat_qrcode_img = ''" v-if="wechat_qrcode_img">
			<image :src="wechat_qrcode_img" style="width: 500rpx;border-radius: 20rpx;" mode="widthFix" @click="previewImage(wechat_qrcode_img)">
		</view>
	</view>
</template>

<script>
	 
	import {
		spreadPeople,
		spreadInfo,
		setUserTop,
		setUserNotes,
		userHasReward,
		getUserContactInformation
	} from '@/api/user.js';
	import {
		getUserCommunityList,
		myFocusLst
	} from '@/api/community.js';
	import { mapGetters } from "vuex";
	import authorize from '@/components/Authorize';
	import emptyPage from '@/components/emptyPage.vue';
	import { HTTP_REQUEST_URL } from '@/config/app';
	import paymentData from '@/components/payDataList';
	import { checkPhone } from '@/utils/validate.js';
	export default {
		components: {
			authorize,
			emptyPage,
			paymentData
		},
		data() {
			return {
				domain: HTTP_REQUEST_URL,
				page: 1,
				limit: 20,
				keyword: '',
				sort: '',
				grade: 0,
				status: false,
				recordList: [],
				list_count: 0,
				isAuto: false, //没有授权的不会自动授权
				isShowAuth: false, //是否隐藏授权
				userInfo:{},
				tabIndex: 1,
				tabList:[
					{
						type: 1,
						title:'接单用户'
					},
					{
						type: 2,
						title:'我的关注'
					}
				],
				is_notes: false,
				user_notes: '',
				item_index: '',
				is_popup_user_contact: false,
				popup_user_contact: '',
				popup_user_contact_type: '',
				pay_close: false,
				payMode: [{
					name: '微信支付',
					icon: 'icon-weixinzhifu',
					value: 'wechat',
					title: '微信快捷支付',
					payStatus: true
					}
					// #ifdef H5 ||APP-PLUS
					,
					{
					name: '支付宝支付',
					icon: 'icon-zhifubao',
					value: 'alipay',
					title: '支付宝支付',
					payStatus: true
					}
					// #endif
					,
					{
						name: "余额支付",
						icon: "icon-yuezhifu",
						value: 'balance',
						title: '可用余额:',
						number: 0,
						payStatus: this.$store.getters.globalData.yue_pay_status
					}
				],
				user_vip_tips: false,
				wechat_qrcode_img: '', // 微信二维码
			};
		},
		computed: mapGetters(['isLogin','viewColor','keyColor']),
		onLoad(options) {
			this.grade = parseInt(options.grade) || 0;
			if(this.grade == 4) {
				uni.setNavigationBarTitle({
					title: '客户推广'
				})
			} else if(this.grade == 3) {
				uni.setNavigationBarTitle({
					title: '我的客户'
				})
			} else if(this.grade == 1) {
				uni.setNavigationBarTitle({
					title: '二级团队'
				})
			} else {
				uni.setNavigationBarTitle({
					title: '我的团队'
				})
			}
			if (this.isLogin) {
				this.userSpreadNewList();
			} else {
                this.isAuto = true;
                this.isShowAuth = true
			}
		},
		onShow: function() {
			if (this.is_show){
				this.userSpreadNewList();
			}
		},
		onHide: function() {
			this.is_show = true;
		},
		methods: {
			previewImage(url) {
				uni.previewImage({
					urls: [url],
					longPressActions :{
						itemList:['保存图片']
					},
				})
			},
			onLoadFun: function(e) {
				this.isShowAuth = false;
				this.userSpreadNewList();
			},
			// 授权关闭
			authColse: function(e) {
				this.isShowAuth = e
			},
			/**
			 * 查看会员联系方式
			 * @param {Object} uid
			 * @param {Object} contact_information
			 */
			getUserContactInformations(data, contact_information) {
				if(!this.isLogin) return this.$util.Tips({title:'请先登录'}, {tab: 1, url: '/pages/index/index'})
				let that = this;
				let uid = data.right_id;
				if(contact_information == 'phone' || contact_information == 'we_chat_account'){
					getUserContactInformation({uid, contact_information}).then(res=>{
						if(contact_information == 'phone' && checkPhone(res.message)) {
							return uni.makePhoneCall({
								phoneNumber: res.message // 替换为你想拨打的电话号码
							  }).then(() => {
								console.log('拨打电话成功')
							  }).catch((error) => {
								console.log('拨打电话失败', error)
							  })
						} else {
							if (res.data && res.data.is_img == 1) {
								that.wechat_qrcode_img = res.data.data;
							} else {
								that.popup_user_contact = res.message || '暂未设置该联系方式'
								that.popup_user_contact_type = contact_information;
								that.is_popup_user_contact = true;
							}
						}
					}).catch(err=>{
						if(err == '次数不足') {
							that.user_vip_tips = true;
							// that.pay_close = true;
						}
					})
				}
			},
			copyUserContact() {
				let that = this;
				that.is_popup_user_contact = false;
				if(this.popup_user_contact && this.popup_user_contact!='暂未设置该联系方式') {
					uni.setClipboardData({
					  data: that.popup_user_contact,
					  success: function () {
						return that.$util.Tips({title:'复制成功'});
					  }
					})
				}else{
					return this.$util.Tips({title:'复制失败'});
				}
			},
			openNotes(index) {
				this.is_notes = true;
				this.user_notes = this.recordList[index].user_notes || '';
				this.item_index = index;
			},
			subNotes() {
				let that = this,
				relevance_id = this.recordList[this.item_index].relevance_id,
				user_notes = this.user_notes;
				setUserNotes({relevance_id, user_notes}).then(res=>{
					that.is_notes = false
					that.$set(that.recordList[that.item_index], 'user_notes', user_notes)
				}).catch(err=>{
					that.$util.Tips({title: err})
				})
			},
			bindTab(index){
				this.tabIndex = index
				this.page =1
				this.status = false
				this.recordList = [];
				this.userSpreadNewList();
			},
			userSpreadNewList: function() {
				let that = this;
				let page = that.page;
				let limit = that.limit;
				let status = that.status;
				let keyword = that.keyword;
				let sort = that.sort;
				let grade = that.grade;
				let recordList = that.recordList;
				let recordListNew = [];
				if (status == true) return;
				if(grade == 4) {
					getUserCommunityList({
						page: page,
						limit: limit,
						type: 2
					}).then(res => {
						let len = res.data.list.length;
						let recordListData = res.data.list;
						recordListNew = recordList.concat(recordListData);
						that.status = limit > len;
						that.page = page + 1;
						that.$set(that, 'recordList', recordListNew);
					})
				} else if(grade == 3) {
					if(that.tabIndex == 1) {
						getUserCommunityList({
							page: page,
							limit: limit,
							type: 3
						}).then(res => {
							let len = res.data.list.length;
							let recordListData = res.data.list;
							recordListNew = recordList.concat(recordListData);
							that.status = limit > len;
							that.page = page + 1;
							that.$set(that, 'recordList', recordListNew);
						})
					}else{
						myFocusLst({
							page: page,
							limit: limit,
						}).then(res => {
							let len = res.data.list.length;
							let recordListData = res.data.list;
							recordListNew = recordList.concat(recordListData);
							that.status = limit > len;
							that.page = page + 1;
							that.$set(that, 'recordList', recordListNew);
						})
					}
				} else {
					spreadPeople({
						page: page,
						limit: limit,
						keyword: keyword,
						level: grade+1,
						sort: sort,
					}).then(res => {
						let len = res.data.list.length;
						let recordListData = res.data.list;
						recordListNew = recordList.concat(recordListData);
						// that.list_count = res.data.count;
						if (res.data.count > 0 && page == 1) {
							uni.setNavigationBarTitle({
								title: '我的团队'+res.data.count+'人'
							})
						}
						that.status = limit > len;
						that.page = page + 1;
						that.$set(that, 'recordList', recordListNew);
					});
				}
			},
			couponTap2(data) {
				let that = this;
				if (this.isLogin === false) {
					return this.$util.Tips({title: '请先登录'}, {
						tab: 1,
						url: '/pages/user/index'
					})
				} else {
					userHasReward({type: 'is_svip'}).then(res=>{
						if(res.data.status == 1) {
							that.$util.Tips('/pages/chat/customer_list/chat?userId='+data.uid)
						} else {
							that.user_vip_tips = true;
						}
					})
					/* uni.navigateTo({
						url: `/pages/chat/customer_list/chat?userId=${data.uid}`
					}); */
				}
			},
			setTop(relevance_id, is_topping) {
				let that = this;
				is_topping = is_topping == 1 ? 0 : 1;
				setUserTop({relevance_id, is_topping}).then(res=>{
					that.bindTab(that.tabIndex)
				}).catch(err=>{
					that.$util.Tips({title: err})
				})
			},
			viewUser(uid) {
				console.log(uid);
				let that = this;
				if (that.isLogin === false) {
					return that.$util.Tips({title: '请先登录'}, {
						tab: 1,
						url: '/pages/user/index'
					})
				} else {
					userHasReward({type: 'is_svip'}).then(res=>{
						if(res.data.status == 1) {
							that.$util.Tips('/pages/plantGrass/plant_user/index?id='+uid)
						} else {
							that.user_vip_tips = true;
						}
					})
				}
				
			},
			onChangeFun: function(e) {
				let opt = e;
				let action = opt.action || null;
				let value = opt.value != undefined ? opt.value : null;
				action && this[action] && this[action](value);
			},
			payClose: function() {
				this.pay_close = false;
			},
			goUrl(url) {
				this.$util.Tips(url);
			}
		},
		onReachBottom: function() {
			this.userSpreadNewList();
		}
	}
</script>

<style scoped lang="scss">
	.navTabBox{
		background: #fff;
		height: 90rpx;
	}
	.longTab{
		display: flex;
		text-align: center;
		padding: 30rpx 0;
	}
	.tab-item{
		width: 50%;
		display: inline-block;
		line-height: 44rpx;
		position: relative;
		text{
			position: relative;
			display: inline-block;
			font-size: 32rpx;
			font-weight: 400;
			color: #1C211D;
		}
	}
	.tab-item.on{
		color: var(--view-theme);
		text{
			font-weight: 500;
		}
		&:before{
			content: "";
			display: inline-block;
			width: 192rpx;
			height: 22rpx;
			background-color: var(--view-theme);
			position: absolute;
			left: 25%;
			bottom: 0;
		}
	}
	.promoterHeader {
		background-image: linear-gradient(to right, var(--view-bntColor21) 0%, var(--view-bntColor22) 100%);
	}
	.t-color {
		color: var(--view-theme);
	}
	.promoter-list {
		padding: 30rpx;
	}
	.promoter-list .list {
		.item {
			padding: 30rpx;
		}
	}
	.promoter-list .list .sortNav {
		background-color: #fff;
		height: 76rpx;
		border-bottom: 1px solid #eee;
		color: #333;
		font-size: 28rpx;
	}

	.promoter-list .list .sortNav .sortItem {
		text-align: center;
		flex: 1;
	}

	.promoter-list .list .sortNav .sortItem image {
		width: 24rpx;
		height: 24rpx;
		margin-left: 6rpx;
		vertical-align: -3rpx;
	}

	.promoter-list .list .item {
		background-color: #fff;
		border-bottom: 1px solid #eee;
		height: 152rpx;
		padding: 0 30rpx 0 20rpx;
		font-size: 24rpx;
		color: #666;
		margin-bottom: 20rpx;
		.picTxt  {
			width: 100%;
			justify-content: unset;
			.pictrue {
				width: 100rpx;
				height: 100rpx;
				border-radius: 50%;
				position: relative;
				image {
					width: 100%;
					height: 100%;
					border-radius: 50%;
				}
				.svip {
					width: 50rpx;
					height: 50rpx;
					position: absolute;
					right: -10rpx;
					bottom: -10rpx;
				}
			}
			.text {
				margin-left: 20rpx;
				padding-top: 8rpx;
				flex: 1;
				.name {
					font-size: 30rpx;
					font-weight: 500;
					color: #37393A;
					line-height: 42rpx;
					max-width: 300rpx;
				}
				.label {
					margin-top: 12rpx;
					font-size: 22rpx;
					font-weight: 400;
					color: #767676;
					line-height: 32rpx;
				}
			}
			.contact-button {
				width: 150rpx;
				justify-content: space-between;
				margin-left: auto;
				display: flex;
				align-items: center;
				grid-gap: 20rpx;
				.user_contact_wx image{
					width: 60rpx;
					height: 52rpx;
				}
				.user_contact_tel image{
					width: 60rpx;
					height: 60rpx;
				}
			}
			.contact_btn {
				font-size: 30rpx;
				font-weight: 500;
				color: #1C211D;
				line-height: 42rpx;
				padding: 12rpx 36rpx;
				background: #FFE103;
				border-radius: 37rpx;
				margin-left: auto;
			}
		}
	}
	.notes_ceng {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0,0,0,0.5);
		z-index: 1;
		.notes_content {
			background: #fff;
			margin: 300rpx 30rpx;
			border-radius: 30rpx;
			padding: 30rpx;
			text-align: center;
			.notes_title {
				font-size: 36rpx;
				    font-weight: bold;
			}
			.notes_input {
				input {
					margin: 30rpx 0;
					padding: 20rpx;
					border: 1px solid #ccc;
					border-radius: 20rpx;
				}
			}
			.notes_btn {
				display: flex;
				.notes_btuuon {
					flex: 1;
					font-size: 32rpx;
				}
			}
		}
	}
	.popup_user_contact {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0,0,0,0.5);
		    z-index: 10;
		.popup_user_contact_c { 
			width: 480rpx;
			margin: 20vh auto;
			background-color: #fff;
			border-radius: 20rpx;
			text-align: center;
			.popup_user_contact_h {
				padding: 30rpx 30rpx 80rpx;
				border-bottom: 1rpx solid #DDDDDD;
				.popup_user_contact_t {
					font-size: 34rpx;
					font-weight: 400;
					color: #2C332D;
					line-height: 48rpx;
				}
				.popup_user_contact_u{
					font-size: 28rpx;
					font-weight: 500;
					color: #323232;
					line-height: 40rpx;
					margin-top: 32rpx;
					text {
						color: #F73D3B;
					}
				}
			}
			.popup_user_contact_b {
				padding: 20rpx 0;
				text-align: center;
				display: flex;
				flex-wrap: nowrap;
				align-items: center;
				.popup_user_contact_close {
					font-size: 28rpx;
					font-weight: 400;
					color: #666764;
					line-height: 40rpx;
					flex: 1;
				}
				.popup_user_contact_copy {
					font-size: 28rpx;
					font-weight: 400;
					color: #323232;
					line-height: 40rpx;
					border-left: 1rpx solid #DDDDDD;
					flex: 1;
				}
			}
		}
	}
// 升级VIP弹窗
.user_vip_back {
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.5);
	z-index: 35;
}
.user_vip_content {
	background-color: #fff;
	position: fixed;
	top: 30%;
	left: 50rpx;
	right: 50rpx;
	// margin: 50% 50rpx 0;
	border-radius: 30rpx;
	padding: 30rpx;
	text-align: center;
	z-index: 35;
	.user_vip_close {
		position: absolute;
		right: 30rpx;
		top: 50rpx;
		image {
			width: 50rpx;
			height: 50rpx;
		}
	}
	.user_vip_icon {
		margin: 0 auto;
		image {
			width: 140rpx;
			height: 130rpx;
			margin: 0 auto;
			display: block;
		}
	}
	.user_vip_tit  {
		margin-top: 20rpx;
	}
	.user_vip_messag {
		font-size: 32rpx;
		margin-top: 30rpx;
	}
	.user_vip_btn {
		font-weight: bold;
		background-color: #FDE515;
		display: inline-block;
		padding: 10rpx 50rpx;
		border-radius: 10rpx;
		margin-top: 30rpx;
		font-size: 42rpx;
	}
}
</style>
